<html>
  <head>
    <title>工具栏贡献者</title>
  </head>
  <body>
    <script>
      /*
           2、Toolbar Contributors 工具栏贡献者


                                          (1)、如何自定义工具栏项目：

                                                        工具栏系统用于在用户交互界面上定义工具栏。

                                                        模块（或您的应用程序）可以将项目添加到工具栏，然后主题在布局上呈现工具栏。

                                                        只有一个标准工具栏（名为"Main"-定义为常量：StandardToolbars.Main）。对于基本主题，呈现如下所示：

                                                        在上面的屏幕截图中，主工具栏中添加了两个项目：语言切换组件和用户菜单。您可以在此处添加自己的项目。

                                                        eg:  添加通知图标

                                                              在此示例中，我们将在语言切换项的左侧添加一个通知（铃声）图标。
                                                              
                                                              工具栏中的项目应该是视图组件。
                                                              
                                                            ①、  因此，首先，在您的项目中创建一个新的视图组件：


                                                            ②、 NotificationViewComponent.cs：

                                                                      // 工具栏项目模型，视图组件
                                                                      public class NotificationViewComponent : AbpViewComponent
                                                                      {
                                                                          public async Task<IViewComponentResult> InvokeAsync()
                                                                          {
                                                                              return View("/Pages/Shared/Components/Notification/Default.cshtml");
                                                                          }
                                                                      }

                                                            ③、 Default.cshtml
                                                                      // 视图内容
                                                                      <div id="MainNotificationIcon" style="color: white; margin: 8px;">
                                                                          <i class="far fa-bell"></i>
                                                                      </div>

                                                             ④、 现在，我们可以创建一个实现IToolbarContributor接口的类：

                                                                        // 声明工具栏贡献者
                                                                        public class MyToolbarContributor : IToolbarContributor  // 工具栏贡献者
                                                                        {
                                                                            public Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
                                                                            {
                                                                                if (context.Toolbar.Name == StandardToolbars.Main)
                                                                                {
                                                                                    // 添加工具栏项目
                                                                                    context.Toolbar.Items
                                                                                        .Insert(0, new ToolbarItem(typeof(NotificationViewComponent))); // 指向视图组件
                                                                                }

                                                                                return Task.CompletedTask;
                                                                            }
                                                                        }

                                                              ⑤、 最后，您需要将此贡献者添加到AbpToolbarOptions，在模块的ConfigureServices中：

                                                                        // 注册工具栏贡献者
                                                                        Configure<AbpToolbarOptions>(options =>
                                                                        {
                                                                            options.Contributors.Add(new MyToolbarContributor());
                                                                        });

                                                                就是这么简单，当你运行应用程序时，你将在工具栏上看到通知图标。

                                                                
                                                                NotificationViewComponent只是返回一个没有任何数据的视图。现实生活中，您可能希望查询数据库（或调用HTTP API）以获取通知并传递给视图。

                                                                如果需要，您可以将JavaScript或CSS文件添加到工具栏项的全局包（如前所述）中。


                                            (2)、布局挂钩  Layout Hooks  

                                                                Layout Hooks系统允许您在布局的某些特定部分添加代码。

                                                                所有主题的所有布局都应实现这些挂钩。

                                                                然后您可以将视图组件添加到挂钩点中。

                                                          eg: 添加Google Analytics脚本

                                                                  假设您需要将Google Analytics脚本添加到布局中（可用于所有页面）。
                                                                  
                                                                 ①、 首先，在您的项目中创建一个视图组件：


                                                                 ②、 GoogleAnalyticsViewComponent.cs

                                                                            // 创建视图组件类
                                                                            public class GoogleAnalyticsViewComponent : AbpViewComponent
                                                                            {
                                                                                public IViewComponentResult Invoke()
                                                                                {
                                                                                    return View("/Pages/Shared/Components/GoogleAnalytics/Default.cshtml");
                                                                                }
                                                                            }
                                                     
                                                                  ③、 Default.cshtml

                                                                            <、script>
                                                                                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                                                                                        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                                                                                        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                                                                                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

                                                                                ga('create', 'UA-xxxxxx-1', 'auto');
                                                                                ga('send', 'pageview');
                                                                            </、script>

                                                                            使用您自己的代码更改UA-xxxxxx-1。

                                                                  ④、然后，您可以将此组件添加到模块的ConfigureServices中的任何挂钩点：
                                                                  
                                                                            Configure<AbpLayoutHookOptions>(options =>
                                                                            {
                                                                                options.Add(
                                                                                    LayoutHooks.Head.Last, //布局挂钩名称
                                                                                    typeof(GoogleAnalyticsViewComponent) // 要添加的视图组件
                                                                                );
                                                                            });

                                                                  现在，GA代码将作为最后一项插入到页面的head中。

                                                                  您（或您正在使用的模块）可以将多个项目添加到同一个挂钩中。所有这些都将被添加到布局中。

                                                                  上面的配置将GoogleAnalyticsViewComponent添加到所有布局。您可能只想添加到特定布局：

                                                                            Configure<AbpLayoutHookOptions>(options =>
                                                                            {
                                                                                options.Add(
                                                                                    LayoutHooks.Head.Last,
                                                                                    typeof(GoogleAnalyticsViewComponent),
                                                                                    layout: StandardLayouts.Application //  设置要添加到的布局
                                                                                );
                                                                            }); 
      */
    </script>
  </body>
</html>